<template>
    <div class="search">
        <div class="left">
            <div class="item start">
                <div class="name">住</div>
                <div class="time">{{ startDayStr }}</div>
            </div>
            <div class="item end">
                <div class="name">离</div>
                <div class="time">{{ endDayStr }}</div>
            </div>
        </div>
        <div class="content">
            <div class="keyword">关键字/位置/民宿</div>
        </div>
        <div class="right">
            <van-icon size="20px" color="#3f4954" name="search" />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia';

import useMainStore from '@/store/modules/main';
import { formatMonthDay2 } from '@/utils/formatDate'

const mainStore = useMainStore()
const { startDay, endDay } = storeToRefs(mainStore)
const startDayStr = ref(formatMonthDay2(startDay.value))
const endDayStr = ref(formatMonthDay2(endDay.value))

</script>

<style lang="less" scoped>
.search {
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 10px;
    background-color: #F5F5F5;
    margin: 5px 15px 10px;
    // padding: 5px;

    .left {
        display: flex;
        flex-direction: column;
        margin-left: 10px;

        .item {
            display: flex;
            flex-direction: row;
            font-size: 12px;
            margin: 3px;
        }

        .name {
            color: #999;
        }

        .time {
            margin: 0 3px;
            color: #000;
        }

    }

    .content {
        width: 80%;
        margin: 0 10px;

        .keyword {
            color: #999;
            font-size: 13px;
        }
    }

    .right {
        margin-right: 15px;
    }
}
</style>